<template>
  <div class="container">
    <h3>vue+openlayers: 绘制矩形</h3>
    <h4>
      <el-button type="primary" size="mini" @click="drawBox">绘制矩形</el-button>
      <el-button type="danger" size="mini" @click="stopDraw">停止绘制</el-button>
      <el-button type="primary" size="mini" @click="getView">查看绘制</el-button>
    </h4>
    <div id="vue-openlayers"></div>
  </div>
</template>

<script>
import 'ol/ol.css';
import { Map, View } from 'ol';
import Tile from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ';
import LayerVector from 'ol/layer/Vector';
import SourceVector from 'ol/source/Vector';
import Fill from 'ol/style/Fill'; // 用来创建填充样式
import Stroke from 'ol/style/Stroke'; // 用来创建边线样式
import Style from 'ol/style/Style'; // 用来创建样式
import Circle from 'ol/style/Circle'; // 用来创建圆形样式
import Draw, { createBox } from 'ol/interaction/Draw'; // 用来创建绘制交互
export default {
  data() {
    return {
      map: null,
      draw: null, // 绘制对象
      source: new SourceVector({
        wrapX: false // 不允许x轴方向重复
      }),
      features: {} // 用来存储绘制的要素
    }
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      let layer = new Tile({
        source: new XYZ({
          url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=7'
        })
      })
      let vector = new LayerVector({ // 矢量图层
        source: this.source,
        style: new Style({
          fill: new Fill({
            color: 'rgba(255, 255, 255, 0.2)'
          }), // 填充色
          stroke: new Stroke({
            color: '#ffcc33',
            width: 2
          }), // 边线颜色
        })
      })
      this.map = new Map({
        target: 'vue-openlayers',
        layers: [layer, vector],
        view: new View({
          center: [116.397411, 39.909186],
          zoom: 7,
          projection: 'EPSG:4326'
        })
      })
    },
    // 停止绘制
    stopDraw() {
      if (this.draw) {
        this.map.removeInteraction(this.draw); // 移除上一次绘制的绘制对象
      }
    },

    // 绘制矩形
    drawBox() {
      if (this.draw) {
        this.map.removeInteraction(this.draw); // 移除上一次绘制的绘制对象
      }
      let type = 'Circle'; // 绘制类型 Circle:圆形  Polygon:多边形  LineString:线  Point:点 这里的Circle是因为createBox方法返回的是圆形
      let geometryFunction = createBox(); // 绘制的几何图形
      this.draw = new Draw({
        source: this.source,
        type: type,
        geometryFunction: geometryFunction
      })
      this.map.addInteraction(this.draw); // 将绘制对象添加到地图中
      // 获取绘制的几何图形
      this.draw.on('drawend', (e) => {
        let coordinates = e.feature.getGeometry().getCoordinates(); // 获取几何图形的坐标
        console.log('获取几何图形的坐标：',coordinates);
        // 每次绘制完成，把coordinates存储到features中键值对形式的对象中
        this.features['feature' + new Date().getTime()] = coordinates;
        console.log('features:',this.features);
      })
    },

    getView() {
      let size = this.map.getSize();
      this.map.getView().fit(this.source.getExtent(), {
        size: size,
        maxZoom: 17,
        padding: [60, 60, 60, 60],
        duration: 1000, // 动画时长
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
    width: 100%;
    height: 750px;
    margin: 50px auto;
    border: 1px solid #ccc;
    #vue-openlayers {
      width: 100%;
      height: 720px;
      margin: 0 auto;
      border: 1px solid #42b983;
      position: relative;
    }
  }
</style>
